// .Resizer {
//     background: #000;
//     opacity: 0.2;
//     z-index: 1;
//     -moz-box-sizing: border-box;
//     -webkit-box-sizing: border-box;
//     box-sizing: border-box;
//     -moz-background-clip: padding;
//     -webkit-background-clip: padding;
//     background-clip: padding-box;
//   }
   
// .Resizer:hover {
//     -webkit-transition: all 2s ease;
//     transition: all 2s ease;
// }
   
// .Resizer.horizontal {
//     height: 11px;
//     margin: -5px 0;
//     border-top: 5px solid rgba(255, 255, 255, 0);
//     border-bottom: 5px solid rgba(255, 255, 255, 0);
//     cursor: row-resize;
//     width: 100%;
// }
   
// .Resizer.horizontal:hover {
//     border-top: 5px solid rgba(0, 0, 0, 0.5);
//     border-bottom: 5px solid rgba(0, 0, 0, 0.5);
// }
   
// .Resizer.vertical {
//     width: 11px;
//     margin: 0 -5px;
//     border-left: 5px solid rgba(255, 255, 255, 0);
//     border-right: 5px solid rgba(255, 255, 255, 0);
//     cursor: col-resize;
// }
   
// .Resizer.vertical:hover {
//     border-left: 5px solid rgba(0, 0, 0, 0.5);
//     border-right: 5px solid rgba(0, 0, 0, 0.5);
// }
// .Resizer.disabled {
//     cursor: not-allowed;
// }

// .Resizer.disabled:hover {
//     border-color: transparent;
// }

.Resizer {
    background: #000;
    opacity: .1;
    z-index: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    cursor: ew-resize;
}

.Resizer:hover {
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
}

.Resizer.horizontal {
    height: 16px;
    margin: -5px 0;
    border-top: 5px solid rgba(255, 255, 255, 0);
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    cursor: row-resize;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url();
}

.Resizer.horizontal:hover {
    border-top: 5px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
    width: 16px;
    margin: 0 -5px;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
    cursor: col-resize;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url();
}

.Resizer.vertical:hover {
    border-left: 5px solid rgba(0, 0, 0, 0.5);
    border-right: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.disabled {
    cursor: not-allowed;
}

.Resizer.disabled:hover {
    border-color: transparent;
}

.gutter {
    background: #000;
    opacity: .1;
    z-index: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    cursor: ew-resize;
    &.gutter-horizontal {
        width: 8px !important;
        cursor: col-resize;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url();
    }
    &.gutter-vertical {
        height: 8px !important;
        cursor: row-resize;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url();
    }
    &:hover {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        opacity: 0.2;
    }
}
